<template>
  <div>
      <p>vuex中的辅助函数:少按几次键盘 不用写'$store.xxxx.'</p>
      <p>自己的数据：{{msg}}</p>
      <p>自己的数据：{{info}}</p>
      <p>自己的数据：{{loaclNextAge}}</p>
      <hr>
      <p>vuex:{{$store.state.age}}----{{vuexAge}}---{{nextAge}}</p>
      <p>vuex:{{$store.state.money}}------{{money}}</p>
      <p>point:{{$store.state.user.point}}</p>
      <button @click="beOld">按时长大</button>
  </div>
</template>

<script>
// 引入辅助函数-map映射 将store中的属性和方法映射到组件中
import {mapState, mapGetters, mapMutations} from 'vuex'
export default {
    data() {
        return {
            msg: '今天可真热',
            info: '赶紧下课吧，困了',
            age: 69
        }
    },
    computed: {
        loaclNextAge() {
            return this.age + 1
        },
        // 如果需要改变量名 就用对象
        ...mapState({
            vuexAge: 'age',
            money: 'money'
        }),
        // 如果不用改名字 就用方括号
        ...mapGetters(['nextAge'])
    },
    methods: {
        // 当作组件自己的函数去掉用 省略掉了 this.$store.commit()
        ...mapMutations(['beOld'])
    }
}
</script>

<style>

</style>